import React from 'react';
import { ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
export function ContentStream() {
  const articles = [{
    title: "The Science of Double Cleansing: Why It's Essential",
    category: 'Skincare',
    image: 'https://images.unsplash.com/photo-1556228578-0d85b1a4d571?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    featured: true
  }, {
    title: '5 Morning Rituals to Boost Your Energy Naturally',
    category: 'Wellness',
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }, {
    title: 'Clean Makeup Brands That Actually Perform',
    category: 'Makeup',
    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }, {
    title: 'The Ultimate Evening Skincare Ritual',
    category: 'Skincare',
    image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }, {
    title: 'Facial Massage Techniques for Lymphatic Drainage',
    category: 'Wellness',
    image: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'
  }];
  return <section className="py-16 px-4 md:px-8 lg:px-12">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center mb-10">
          <div>
            <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a]">
              Latest Insights
            </h2>
          </div>
          <div className="mt-4 md:mt-0">
            <Link to="/articles" className="text-sm font-medium text-[#4a6b60] hover:text-[#3d5a50] flex items-center">
              View All Articles
              <ArrowRight size={16} className="ml-2" />
            </Link>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {articles.map((article, index) => <div key={index} className={`group bg-white rounded-lg overflow-hidden shadow-sm ${article.featured ? 'lg:col-span-2 lg:row-span-2' : ''}`}>
              <div className={`bg-cover bg-center ${article.featured ? 'h-80' : 'h-56'}`} style={{
            backgroundImage: `url(${article.image})`
          }}></div>
              <div className="p-6">
                <div className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-2">
                  {article.category}
                </div>
                <h3 className={`font-serif ${article.featured ? 'text-xl md:text-2xl' : 'text-lg'} mb-3 group-hover:text-[#4a6b60] transition-colors`}>
                  {article.title}
                </h3>
                {article.featured && <p className="text-sm leading-relaxed mb-4">
                    Discover why beauty experts are advocating for this two-step
                    cleansing method and how it can transform your skin's health
                    and appearance.
                  </p>}
                <Link to="/articles" className="text-sm font-medium text-[#4a6b60] hover:text-[#3d5a50] flex items-center">
                  Read More
                  <ArrowRight size={16} className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                </Link>
              </div>
            </div>)}
        </div>
      </div>
    </section>;
}